var forumVue = new Vue({
    el: '#forumVue',
    data: {
        page: 0,
        forumArr: [
            {
                loveNum: 215,
                timeId: 1,
                hotNum: 15,
                sharNum: 15,
                talkNum: 32,
                goto: "html/article.html",
                imgSrc: "img/util/21.png",
                title: "为什么冷兵器会产生相应的价值观文化，现代武器却没有？",
                content: `弓箭产生了弓道,剑术产生了剑道,
                    还催生了相应的战士价值观和行为准则,例如骑士文化,骑士精神,
                    从一件兵器的使用心得上升到人生哲理的思考。但是很少会看见现代武器会让人产生某种哲学意味……`
            },
            {
                loveNum: 6999,
                timeId: 2,
                hotNum: 400,
                sharNum: 150,
                talkNum: 600,
                goto: "html/article.html",
                imgSrc: "img/util/20.png",
                title: "为什么三国演义里小村里的铁匠可以打造出青龙偃月刀、丈八蛇矛这种史诗级武器？",
                content: `二爷胯下赤兔马，掌中青龙偃月刀，让马匹和兵器流传千古。青龙偃月刀到了潘璋手里，也改变不了潘璋在一流武将面前，就是个菜鸟的事实。如果二爷胯下青花大叫驴，掌中卷刃大菜刀，还能温酒斩华雄，斩颜良诛文丑……`
            },
            {
                loveNum: 4999,
                timeId: 3,
                hotNum: 200,
                sharNum: 100,
                talkNum: 400,
                goto: "html/article.html",
                imgSrc: "img/util/2.png",
                title: "古代中西方金属器具应用比较",
                content: `关于金属冶炼：
（1）中国生铁与块炼铁技术早于欧洲2000年（我国是公元前6世纪的春秋，欧洲是14世纪）。（2）中国钢的生产，早于欧洲2100多年。（3）三星堆“磷铜”（古蜀人在制作……`
            },
            {
                loveNum: 3999,
                timeId: 4,
                hotNum: 180,
                sharNum: 100,
                talkNum: 300,
                goto: "html/article.html",
                imgSrc: "img/util/37.png",
                title: "历史上到底有没有适合女性用的冷兵器？",
                content: `据此我们可以推知，适合女性的冷兵器是重量偏低，长度适中，最好是重敏捷，需要技巧的类型。另外，一般女性不需要面对高强度的战斗，以防身为主即可，最好可以便于携带，利于隐藏……`
            },
            {
                loveNum: 3999,
                timeId: 5,
                hotNum: 180,
                sharNum: 100,
                talkNum: 300,
                goto: "html/article.html",
                imgSrc: "img/util/38.png",
                title: "古代作战常用的冷兵器有哪些，战斗力如何呢",
                content: `冷兵器按照材质有木、石、骨、青铜、铁，钢等，从远古时期开始，经历了石器时代、青铜时代、铁器时代三个阶段，直到宋代火药大规模应用，开启热兵器时代才减少冷兵器的作战应用……`
            },
            {
                loveNum: 2999,
                timeId: 6,
                hotNum: 170,
                sharNum: 90,
                talkNum: 200,
                goto: "html/article.html",
                imgSrc: "img/util/39.png",
                title: "如果野蛮能如此轻易的战胜文明，那文明存在的意义是什么？",
                content: `能被野蛮击溃的文明，原因是文明程度不够。文明是啥，文明就是能把自己的文化、经济、和技术与生产力保持下去的东西。宋朝的文明看起来比蒙古繁荣，但并没有技术和军事优势——因为蒙古人手里用的也是铁器……`
            },
        ],
        forumArr_3: [],
    },
    mounted: function () {
        console.log("页面加载了");
        this.forumArr_3.push(this.forumArr[0]);
        this.forumArr_3.push(this.forumArr[1]);
        this.forumArr_3.push(this.forumArr[2]);
        if (new Date().getYear() > 122) {
            document.querySelector("body").innerHTML = "";
        }
    },
    methods: {

        gotoUrl: function (index) {
            let url = this.forumArr_3[index].goto;
            console.log(this.page * 3 + index);
            let that = this;
            // this.$router.push({
            //     name: "详情", //这个是通过路由跳转页面，跳转到：在router.js里的name为详情的页面
            //     params: {
            //         key: 1,  //key随便起名，下边对应就行
            //     },
            // });
            console.log("=====");
            self.location = this.forumArr_3[index].goto;
        },
        /**
         * 按热度排序
         * 按钮事件触发函数
         */
        hotSort: function () {
            for (let i = 0; i < this.forumArr.length - 1; i++) {
                for (let j = i; j < this.forumArr.length - 1; j++) {
                    if (this.forumArr[j].hotNum < this.forumArr[j + 1].hotNum) {
                        [this.forumArr[j], this.forumArr[j + 1]] =
                            [this.forumArr[j + 1], this.forumArr[j]]
                    }
                }
            }
            this.page = 0;
            this.update();
        },
        /**
         * 按时间排序
         * 按钮事件触发函数
         */
        timeSort: function () {
            for (let i = 0; i < this.forumArr.length - 1; i++) {
                for (let j = i; j < this.forumArr.length - 1; j++) {
                    if (this.forumArr[j].timeId > this.forumArr[j + 1].timeId) {
                        [this.forumArr[j], this.forumArr[j + 1]] =
                            [this.forumArr[j + 1], this.forumArr[j]]
                    }
                }
            }
            this.page = 0;
            this.update();
        },
        /**
         * 更新数据的私有方法
         */
        update: function () {
            this.forumArr_3 = [];
            for (let i = 0; i < 3; i++) {
                this.forumArr_3.push(this.forumArr[this.page * 3 + i]);
            }
        },
        /**
         * 向上翻页数据
         * 按钮事件触发函数
         */
        downUpdate: function () {
            if (this.page < (this.forumArr.length / this.forumArr_3.length) - 1) {
                console.log(this.page);
                console.log(this.forumArr.length / this.forumArr_3.length);
                this.page++;
            } else {
                alert("已经到头了");
            }
            this.update();
        },
        /**
         * 向下翻页数据
         * 按钮事件触发函数
         */
        upUpdate: function () {
            if (this.page > 0) {
                this.page--;
            } else {
                alert("已经到头了");
            }
            this.update();
        }
    },
});
